<template>
    <div id="app">
        <router-view/>
    </div>
</template>
<script>
export default {
}

</script>
<style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#app {
    width: 100%;
    height: 100%;
}


/*videojs*/

.video-player {
    height: 100%;
}

.video-player-box .video-js {
    width: 100%;
    height: 100%;
}

.vjs-custom-skin>.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1.5em;
    margin-top: -1em;
    background-color: rgba(0, 0, 0, .45);
    font-size: 3.5em;
    height: 2em!important;
    line-height: 2em!important;
    margin-top: -1em!important;
}

.vjs-paused.vjs-has-started.vjs-custom-skin>.video-js .vjs-big-play-button,
.video-js.vjs-ended .vjs-big-play-button,
.video-js.vjs-paused .vjs-big-play-button {
    display: block
}

.video-card .poster {
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.video-card:hover .poster {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
}

</style>
